<template>
<!--  面包屑-->
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/main' }">主页</el-breadcrumb-item>
    <el-breadcrumb-item>
      <a href="/student">学生信息表</a></el-breadcrumb-item>
  </el-breadcrumb>

  <div class="box">
    <div class="table-oper">
<!--      <el-button-group class="oper-left">-->
<!--        <el-button  @click="dialogVisible = true" type="success">-->
<!--          添加-->
<!--        </el-button>-->
<!--      </el-button-group>-->
    <el-form :inline="true" :model="studentList" class="oper-right">
    <el-form-item label="姓名">
      <el-input v-model="keyword" placeholder="请输入学生姓名或邮箱" />
      <el-button type="primary" @click="onSearch">查询</el-button>
    </el-form-item>
  </el-form>
  </div>

    <el-table :data="studentList.data" border style="width: 100%">
      <el-table-column fixed prop="id" label="编号" width="80" />
      <el-table-column prop="name" label="姓名"  />
      <el-table-column prop="email" label="邮箱"  />
      <el-table-column prop="avatar" label="头像"  >
        <template #default="{row}">
          <img v-if="row.avatar" :src="row.avatar" alt="头像" style="width: 50px; height: 50px; border-radius: 50%" />
        </template>
      </el-table-column>

      <el-table-column prop="role" label="角色"  />
      <el-table-column prop="sex" label="性别"  />
      <el-table-column prop="describe" label="描述" >
        <template v-slot="{ row }">
          <div class="content-cell">
            <span>{{ row.describe }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"  />
      <el-table-column prop="lastModifiedTime" label="最后修改时间"  />
      <el-table-column prop="status" label="状态"/>


    <el-table-column fixed="right" label="操作" width="120">
      <template #default="{row}">
        <el-button link type="danger" size="small" @click="row.status ? recover(row.id) : del(row.id)" > {{ row.status ? '恢复' : '删除' }}</el-button>
<!--        <el-button type="danger" :icon="Delete" circle />-->
        <el-button link type="success" size="small" @click="changeRole(row.id)" >改变角色</el-button>
      </template>
    </el-table-column>
  </el-table>
    <el-pagination
        :current-page="pageNum"
        :page-size="pageSize"
        :background="true"
        layout="total, prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
        class="pagination"
        style="float: right"
    />
  </div>

<!--  <el-dialog v-model="dialogVisible" title="Tips" width="30%">-->
<!--    <el-form :model="form" label-width="120px">-->
<!--      <el-form-item label="Activity name">-->
<!--        <el-input v-model="form.name" />-->
<!--      </el-form-item>-->
<!--    </el-form>>-->
<!--    <template #footer>-->
<!--      <span class="dialog-footer">-->
<!--        <el-button @click="dialogVisible = false">取消</el-button>-->
<!--        <el-button type="primary" @click="dialogVisible = false">-->
<!--          添加-->
<!--        </el-button>-->
<!--      </span>-->
<!--    </template>-->
<!--  </el-dialog>-->

</template>
<script setup>
import { ElMessageBox,ElMessage } from 'element-plus'
import {ref,reactive,getCurrentInstance,onMounted} from 'vue'
import axios from "axios";
const {proxy}=getCurrentInstance();//proxy就代表Vue对象
import userApi from '../api/public/public.js'
   //将数组数据包含成一个对象
   let list=reactive({data:[]});
   let key=reactive({data:[]});
   let studentList=reactive({
     id: "",
     name: "",
     email: "",
     avatar: "",
     role: "",
     sex:"",
     describe:"",
     createTime: "",
     lastModifiedTime: "",
     status: "",
   });
  let form=reactive({
    id: "",
    name: "",
    email: "",
    avatar: "",
    role: "",
    sex:"",
    describe:"",
    createTime: "",
    lastModifiedTime: "",
  });
   let number=ref(1);
   let pageSize=ref(10);
   let total=ref(1);
   let pageNum=ref(0);
   let keyword=ref("");
   const dialogVisible = ref(false)

   //删除功能
  const del = (uid) => {
    console.log("uid:"+uid)
    ElMessageBox.confirm(
        '确定要删除吗？',
        '提示',
        { confirmButtonText: '确定', cancelButtonText: '返回', type: 'warning' }
    )
        .then(() => {
          // 执行删除操作，可以是发送网络请求删除数据或执行前端视图上的删除操作
          // 假设这里使用axios发送网络请求删除数据，删除成功后给出提示
          axios.get("http://localhost:8080/shixun/user/delete?id="+uid)
              .then(response => {
                // 删除成功的逻辑
                ElMessage.success('删除成功！')
                // 刷新网页
                window.location.reload()
              })
              .catch(error => {
                // 错误处理
                ElMessage.error('删除失败！')
              })
        })
        .catch(() => {
          // 用户点击了"取消"按钮
        });
    };

    const recover = (uid) => {
    console.log('uid:', uid)
    ElMessageBox.confirm(
        '确定要恢复吗？',
        '提示',
        { confirmButtonText: '确定', cancelButtonText: '返回', type: 'warning' }
    )
        .then(() => {
          // 发送恢复请求
          axios.get("http://localhost:8080/shixun/user/reuser?id="+uid)
              .then(response => {
                // 恢复成功的逻辑
                ElMessage.success('恢复成功！')
                // 刷新网页
                window.location.reload()
              })
              .catch(error => {
                // 错误处理
                ElMessage.error('恢复失败！')
              })
        })
        .catch(() => {
          // 用户点击了"取消"按钮
        })
  }

//  修改身份
const changeRole = (uid) => {
  console.log("uid:"+uid)
  ElMessageBox.confirm(
      '确定要将身份切换为老师吗？',
      '提示',
      { confirmButtonText: '确定', cancelButtonText: '返回', type: 'warning' }
  )
      .then(() => {
        // 执行删除操作，可以是发送网络请求删除数据或执行前端视图上的删除操作
        // 假设这里使用axios发送网络请求删除数据，删除成功后给出提示
        axios.get("http://localhost:8080/shixun/user/setTeacher?id="+uid)
            .then(response => {
              // 删除成功的逻辑
              ElMessage.success('修改成功！')
              // 刷新网页
              window.location.reload()
            })
            .catch(error => {
              // 错误处理
              ElMessage.error('修改失败！')
            })
      })
      .catch(() => {
        // 用户点击了"取消"按钮
      });
};



onMounted(()=>{
      handleCurrentChange(number.value)
    })

//分页
function handleCurrentChange(number){
  pageNum=number;
  userApi.getList(pageNum,'student').then((response)=>{
    list.data=response.data.data.list;
    // console.log("list==",list);
    total.value=response.data.data.total;
    pageSize.value=response.data.data.pageSize;
    pageNum=response.data.data.pageNum;
    studentList.data=list.data;
  });
}
//搜索
function onSearch() {
  let key = keyword.value.trim();
  console.log("params =", key);
  if(key==""){
    handleCurrentChange(number.value);
  }else{
    userApi.search(key,'student').then(response => {
      console.log("response =", response);
      studentList.data= response.data.data.list;
      console.log("studentList.data =", studentList);
    })
  }
}
</script>

<style scoped>
.box{
  margin-top:30px;
}
.pagination{
  margin-top:15px;
}
.oper-left{
  float:left;
}
.oper-right{
  float: right;
}
.content-cell {
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 使用省略号代替隐藏的内容 */
  display: -webkit-box; /* 用于作为弹性盒子布局方式 */
  -webkit-box-orient: vertical; /* 垂直方向排列 */
  -webkit-line-clamp: 1; /* 最多显示两行 */
}
</style>